<button class="button">
  <svg class="w-6 h-6" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" stroke-linejoin="round" stroke-linecap="round"></path>
  </svg>
  <span class="text">
    Button
  </span>
</button>
<style>
/* From Uiverse.io by reshades - Tags: button, hover, svg */
.button {
  width: 10em;
  height: 3em;
  border-radius: 8px;
  border: 0.15em solid rgb(162, 63, 255);
  color: rgb(162, 63, 255);
  background-color: #00000000;
  transition: all 0.5s ease;
}

.button .text {
  display: none
}

.button:hover>.text {
  display: block;
}

.button:hover>svg {
  display: none;
}

.button:hover {
  background-color: rgb(162, 63, 255);
  color: #fff
}

.button svg {
  width: 1.5em;
  margin-top: 3px;
}
</style>
